<template>
  <Header></Header>

  <br>
  <div>
    <RouterLink to="/home" active-class="ac">首页</RouterLink>
    <span></span>
    <RouterLink :to="{name:'page1'}" active-class="ac">评论</RouterLink>
    <span></span>
    <RouterLink :to="{path:'/about'}" active-class="ac">关于</RouterLink>
  </div>

  <br>
  <hr>
  <div class="view">
    <RouterView></RouterView>
  </div>

</template>
<script lang="ts" setup name="App">
import { RouterLink, RouterView } from "vue-router";
import Header from "@/components/Header.vue";
</script>

<style>
/* styles.css */
/* 悬停状态 */
.ac {
  background-color: #54bd18;
  color: #b60f1a;
}

/* 分隔符样式 */
div > span {
  color: #aaa;
  font-size: 18px;
}

/* 分隔符的空白 */
div > span {
  margin: 0 10px;
}

/* 分隔线样式 */
hr {
  border: 0;
  border-top: 1px solid #ddd;
  margin: 20px 0;
}

/* 路由视图容器样式 */
.view {
  padding: 20px;
  background-color: #5ab23a;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 0 auto; /* 居中对齐 */
  max-width: 800px; /* 最大宽度 */
  min-height: 200px; /* 最小高度 */
}
</style>
